<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Context Menu on DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Context Menu on DataGrid</h2>
<p>Right click on the header of DataGrid to display context menu.</p>
<div style="margin:20px 0;"></div>
<table id="dg"></table>
<script type="text/javascript">
    (function ($) {
        function buildMenu(target) {
            var state = $(target).data('datagrid');
            if (!state.columnMenu) {
                state.columnMenu = $('<div></div>').appendTo('body');
                state.columnMenu.menu({
                    onClick: function (item) {
                        if (item.iconCls == 'tree-checkbox1') {
                            $(target).datagrid('hideColumn', item.name);
                            $(this).menu('setIcon', {
                                target: item.target,
                                iconCls: 'tree-checkbox0'
                            });
                        } else {
                            $(target).datagrid('showColumn', item.name);
                            $(this).menu('setIcon', {
                                target: item.target,
                                iconCls: 'tree-checkbox1'
                            });
                        }
                    }
                })
                var fields = $(target).datagrid('getColumnFields', true).concat($(target).datagrid('getColumnFields', false));
                for (var i = 0; i < fields.length; i++) {
                    var field = fields[i];
                    var col = $(target).datagrid('getColumnOption', field);
                    state.columnMenu.menu('appendItem', {
                        text: col.title,
                        name: field,
                        iconCls: 'tree-checkbox1'
                    });
                }
            }
            return state.columnMenu;
        }

        $.extend($.fn.datagrid.methods, {
            columnMenu: function (jq) {
                return buildMenu(jq[0]);
            }
        });
    })(jQuery);

    $(function () {
        $('#dg').datagrid({
            url: 'datagrid_data1.json',
            method: 'get',
            title: 'Context Menu on DataGrid',
            iconCls: 'icon-save',
            width: 700,
            height: 250,
            fitColumns: true,
            singleSelect: true,
            columns: [[
                {field: 'itemid', title: 'Item ID', width: 80},
                {field: 'productid', title: 'Product ID', width: 120},
                {field: 'listprice', title: 'List Price', width: 80, align: 'right'},
                {field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right'},
                {field: 'attr1', title: 'Attribute', width: 250},
                {field: 'status', title: 'Status', width: 60, align: 'center'}
            ]],
            onHeaderContextMenu: function (e, field) {
                e.preventDefault();
                $(this).datagrid('columnMenu').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
        });
    });
</script>
</body>
</html>